import React, { Component } from 'react'
import {Card, Button, Table, Form, Select, Modal, message} from 'antd';
import axios from './../../axios';
import utils from './../../utils/utils';
const FormItem = Form.Item;
const Option = Select.Option;
class CityManager extends Component {
    state = {
        list: [],
        isShowOpenCity: false, // 开通城市弹框
    }
    params = {
        page: 1
    }
    componentDidMount() {
        this.requestList()
    }
    // 默认请求我们的接口数据
    requestList = () => {
        let _this = this;
        axios.Ajax({
            url: '/citymanage',
            method: 'GET',
            data: {
                params: {
                    page: this.params.page,
                    isShowLoading: true
                }
            }
        }).then((res)=>{
            res.result.list.map((item, index)=>{
                item.key = index;
                return item;
            })
            this.setState({
                list: res.result.list,
                pagination: utils.pagination(res, (current) => {
                    _this.params.page = current;
                    _this.requestList();
                })
            })
        })
    }
    // 开通城市接口调用
    requestOpenCity = (cityInfo) => {
        axios.Ajax({
            url: '/opencity',
            method: 'POST',
            data: {
                params: {
                    isShowLoading: true,
                    cityInfo
                }
            }
        }).then((res)=> {
            message.success(res.msg);
            this.setState({
                isShowOpenCity: false
            })
            this.requestList();
        })
    }
    // 开通城市
    handleOpenClick = () => {
        this.setState({
            isShowOpenCity: true
        })
    }
    // 开通城市表单提交
    handleSubmit = (e) => {
        e.preventDefault();
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log(cityInfo);
        this.requestOpenCity(cityInfo);
    }
    render () {
        const columns = [
            {
                title: '城市ID',
                dataIndex: 'id',
                align: 'center'
            },
            {
                title: '城市名称',
                dataIndex: 'name',
                align: 'center'
            },
            {
                title: '用车模式',
                dataIndex: 'mode',
                align: 'center',
                render: (mode)=> {
                    return mode === '1' ? '指定停车区': '禁停区'
                }
            },
            {
                title: '营运模式',
                dataIndex: 'op_mode',
                render: (op_mode)=> {
                    return op_mode === '1' ? '自营': '加盟'
                },
                align: 'center'
            },
            {
                title: '授权加盟商',
                dataIndex: 'franchisee_name',
                align: 'center'
            },
            {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render: (arr)=> {
                    return arr.map((item) => {
                        return item.user_name;
                    }).join(',')
                },
                align: 'center'
            },
            {
                title: '城市开通时间',
                dataIndex: 'open_time',
                align: 'center'
            },
            {
                title: '操作时间',
                dataIndex: 'update_time',
                align: 'center'
            },
            {
                title: '操作人',
                dataIndex: 'sys_user_name',
                align: 'center'
            },
        ]
        return (
            <div>
                <Card>
                    <FilterFormCreate/>
                </Card> 
                <Card style={{'marginBottom': 0}}>
                    <Button type="primary" onClick={this.handleOpenClick}>开通城市</Button>
                </Card>
                <div className="content-wrapper">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                    />
                </div>
                <Modal 
                    title="开通城市"
                    cancelText="取消"
                    okText="确认"
                    visible={this.state.isShowOpenCity}
                    onCancel={() => {
                        this.setState({
                            isShowOpenCity: false
                        })
                    }}
                    onOk={this.handleSubmit}>
                    <OpenCityFormCreate wrappedComponentRef = {(inst)=> this.cityForm = inst }/>
                </Modal>
            </div>
        )
    }
}
class FilterForm extends Component {
    render () {
        const {getFieldDecorator}  = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            <Select placeholder="全部" style={{width: 100}}>
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">上海市</Option>
                                <Option value="4">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode')(
                            <Select placeholder="全部" style={{width: 130}}>
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode')(
                            <Select placeholder="全部" style={{width: 100}}>
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status')(
                            <Select placeholder="全部" style={{width: 100}}>
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        )
    }
}
const FilterFormCreate = Form.create({})(FilterForm);
class OpenCityForm extends Component {
    render() {
        const formItemLayout = {
            labelCol: {span: 5},
            wrapperCol:{span: 12}
        }
        const {getFieldDecorator} = this.props.form;
        return (
            <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemLayout}>
                    {
                       getFieldDecorator('city_id',{

                       })(
                        <Select placeholder="全部">
                            <Option value="">全部</Option>
                            <Option value="1">北京市</Option>
                            <Option value="2">天津市</Option>
                            <Option value="3">上海市</Option>
                            <Option value="4">深圳市</Option>
                        </Select>
                       ) 
                    }
                    
                </FormItem>
                <FormItem label="运营模式" {...formItemLayout}>
                    {
                       getFieldDecorator('op_mode',{})(
                        <Select>
                            <Option value="1">自营</Option>
                            <Option value="2">加盟</Option>
                        </Select>
                       ) 
                    }
                    
                </FormItem>
                <FormItem label="用车模式" {...formItemLayout}>
                    {
                       getFieldDecorator('bicycle_mode', {})(
                        <Select>
                            <Option value="1">指定停车点</Option>
                            <Option value="2">禁停区</Option>
                        </Select>
                       ) 
                    }
                    
                </FormItem>
            </Form>
        )
    }
}
const OpenCityFormCreate = Form.create({})(OpenCityForm);
export default CityManager;